<div class="searchHtml" ng-controller="file-search" style="margin-right:0;margin-left:0;background-color:#fff;margin-left:0;"
  class="row">
  <!-- 页面具体内容 -->
  <div class="row" style="margin-right:0;margin-left:0;padding-left:2%;padding-right:2%">
    <!-- 左侧：查询条件 -->
    <div class="col-xs-3" style="border:0px solid #F1F1F1;padding-left: 0;">
      <div class="filterDivs">
        <div class="filterTitle">
          文件分类结构
          <button ng-click="folderFilter('')" style="float:right" type="button" class="btn btn-xs btn-default">取消分类选择</button>
        </div>
        <div ng-show="treeFolderData.length>0" style="margin:auto;width:100%;position:relative;font-size:12px;">
          <style>
            .ztree * {
              font-size: 13px;
            }

            .ztree li ul li a.curSelectedNode {
              background-color: #337ab7;
              border: 0;
              border-radius: 6px;
              letter-spacing: 2px;
              padding: 2px 4px;
              color: white;
              height: 22px;
              opacity: 0.9;
            }
            @media screen and ( max-width: 799px){
            .keyword{
            width: 33.33333333%;
            }
            }

            @media(min-width:800px){
            .keyword{
            width: 58.33333333%;
            }
            }
            @media(min-width:1000px){
            .keyword{
            width: 66.66666667%;
            }
            }
            @media(min-width: 1366px){
            .keyword{
            width: 75%;
            }
            }
          </style>
          <!-- <ul id="zTreeBox" class="ztree" style="width: 100%;padding: 0;background-color: white;overflow-y: hidden;margin-top: 0px; border: 1px solid #eee;"></ul> -->
          <ul id="zTreeBox" class="ztree" style="width: 100%;height: auto;max-height: 300px;overflow-y: unset;padding: 0;background-color: white;margin-top: 0px; border: 1px solid #eee;"></ul>
          <!-- <ul class="accordion-menu">
            <li ng-class="{'befores_list_click': folders.check, 'open': folders.show}" ng-click="folderFilter($event,folders)" ng-repeat="folders in byFolder">
              <div class="dropdownlink"><i class="fa fa-road"></i> {{folders.name}}
                <i class="fa fa-chevron-down" ng-click="folderShow($event,folders)"></i>
              </div>
              <ul class="submenuItems" ng-style="{'display':!folders.check&&folders.show?'block':'none'}">
                <li ng-repeat="folder in folders.children" ng-click="folderFilter($event,folder)" ng-class="{'befores_list_click': folder.check}">{{folder.name}}</li>
              </ul>
            </li>
          </ul> -->
        </div>
        <div ng-show="treeFolderData.length==0" style="margin:auto;width:100%;position:relative;font-size:12px;">
          暂无数据
        </div>
      </div>
      <div class="filterDivs">
        <div class="filterTitle">
          文件分类标签
          <button ng-click="tagFilter('')" style="float:right" type="button" class="btn btn-xs btn-default">取消标签选择</button>
        </div>
        <div style="margin:auto;width:100%;position:relative;font-size:12px;padding: 4px;">
          <!-- <span ng-click="tagFilter(tag.name)" class="fileTags" ng-class="{'fileTagsClick': searchFilter.tag==tag.name}" ng-repeat="tag in byTag">
            {{tag.name}}
          </span> -->
          <ul class="fileTagType">
            <li ng-repeat="tag in tags track by $index" style="margin-bottom: 10px;">
              {{tag.tagType}}：<span ng-click="tagFilter(tagName)" class="fileTags" ng-class="{'fileTagsClick': searchFilter.tag==tagName}"
                ng-repeat="tagName in tag.tagNames track by $index">
                {{tagName}}
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="row">
        <div class="filterDivs" style="width:43%;margin-left:4%;float:left">
          <div class="filterTitle" style="font-size: 16px;">
            时间过滤</div>
          <div style="border:1px solid #E7E7E7;">
            <div class="filterBy byDate">
              <ul style="margin-bottom: 0;padding-left: 0;list-style-type: none;">
                <li ng-class="{'befores_list_filter_click': searchFilter.time==date.value}" class="befores_list_filter" ng-repeat="date in byDate"
                  id="dli-{{date.id}}" style="line-height: 2;" ng-click="timeFilter(date.value)">
                  <div style="padding-top:2px;padding-left:10px;">{{date.spanValue}}</div>
                </li>
              </ul>
            </div>
          </div>

        </div>
        <div class="filterDivs" style="width:43%;margin-right:4%;float:right ">
          <div class="filterTitle" style="font-size: 16px;">
            文件类型过滤</div>
          <div style="border:1px solid #E7E7E7;">
            <div class="filterBy byType">
              <ul style="margin-bottom: 0;padding-left: 0;list-style-type: none;">
                <li ng-class="{'befores_list_filter_click': searchFilter.type==type.value}" class="befores_list_filter" ng-repeat="type in byType"
                  id="tli-{{type.id}}" style="line-height: 2;" ng-click="typeFilter(type.value)">
                  <div style="padding-top:2px;padding-left:10px;">{{type.spanValue}}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>


      </div>
    </div>
    <!-- 右侧：查询内容 -->
    <div class=" col-xs-9" style="border-left:1px solid #F1F1F1;padding-right: 0;padding-left:2%;">
      <!-- 查询输入框及按钮 -->
      <div class="row" style="color:#fff; margin-top:30px;margin-right:0;margin-left:0;">
        <div class="col-sm-3 col-xs-3 col-lg-3 keyword" style="padding-right:0px;width:50%;">
          <input type="text" style="height:30px;width:100%;color:#5A6470;padding:5px;border:1px solid #3468b5" ng-model="searchText"
            placeholder="关键字">
        </div>
        <div class="col-sm-1 col-xs-1 col-lg-1" style="padding:0px; width:50%;background-color:#fff;">
          <button style="color:#fff;  background-color:#3468b5; width:65px;height:30px; font-size:14px; text-align:center; border:0px;float: left;margin-right: 10px;"
            ng-click="searchData()">查询</button>
            <button style="color:#000;  background-color:#ffffff; width:100px;height:30px; font-size:14px; text-align:center; border: 1px solid #c8c7c7;float: left;margin-right: 10px;"
            ng-click="resetData()">重置输入框</button>
            <div class="wrap" style="margin-top:0px;float: left;width: 120px;">
              <input type="checkbox" id="search" ng-model="searchType">
              <label class="searchLabel" for="search"></label> <span style="font-size:16px;margin-left:25px; margin-top: 5px; float: left; color:#000">精确匹配</span>
          </div>
        </div>
      </div>
      <!-- 显示列表浏览 -->
      <div ng-show="tableData.length>0">
        <div style="height:30px;text-align: right;margin-top: 30px;">

          <div class="fa fa-chevron-up" style="float:right;width:92px;text-align: center;color:#1480C7; cursor: pointer;" ng-click="closeAll()">
            全部合并
          </div>
          <div class="fa fa-chevron-down" style=" cursor: pointer;color:#1480C7;float:right;width:92px;text-align: center;margin-right:5px;"
            ng-click="openAll()">全部展开</div>

        </div>
        <!-- /.panel-heading -->
        <style>
          a{
            color: #fff;
          }
        </style>
        <div class="panel panel-primary" style="border-radius:unset" ng-repeat="file in tableData">
          <div class="panel-heading" style="border-radius:unset;height: 42px;padding-top: 1px;padding-left: 2px;">
            <div class="{{file.wordCssto}}">{{file.wordCsstext}}</div>
            <div style="font-size:20px;text-align:center;float:right;width:170px;position: relative;top: 5px;">
              <a class="btn btn-social-icon btn-bitbucket" title="查看摘要" ng-show="file.down" ng-click="openDown(file)"><i class="fa fa-chevron-circle-down"></i></a>
              <a class="btn btn-social-icon btn-bitbucket" title="收起摘要" ng-show="file.up" ng-click="openUp(file)"><i class="fa fa-chevron-circle-up"></i></a>
              <a class="btn btn-social-icon btn-bitbucket" title="查看全文" ng-click="showFileDetails(file)" data-toggle="modal" data-target="#showFileDetails"><i class="fa fa-columns"></i></a>
              <a class="btn btn-social-icon btn-bitbucket" title="下载文件" ng-click="download(file)"><i class="fa fa-download"></i></a>
              <a class="btn btn-social-icon btn-bitbucket" title="删除文件" ng-click="delete(file)"><i class="fa fa-trash"></i></a>
            </div>
            <!-- <div style="float:right;display: table-cell;vertical-align: middle;height:40px;line-height:40px;width:calc(100% - 210px)">
              <span style="line-height:40px;"><b> {{file.meta.short_name}}</b></span>
            </div> -->
            <div class="vc-font2">
              <span class="vc-inner"><b>{{file.meta.short_name}}</b></span><span class="vc-fix"><!-- 此标签不能换行 --></span>
            </div>
          </div>
          <!-- /.panel-heading -->
          <div class="panel-body">
            <!-- 显示文件摘要 -->
            <div class="showFileSummary" ng-show="file.openInfo">
              <div class="row" style="margin:0;" ng-repeat="fileText in file.content.highlight.text track by $index">
                <!-- style="float:left;font-size: 14px;margin-left: 10px;margin-right: 10px;" -->
                <div style="float:left;font-size: 14px;margin-left: 10px;margin-right: 10px;" ng-bind-html="fileText|to_trusted">
                </div>
                <div id="{{file.meta.id}}" style="float:right;width:255px;border:1px solid #F1F1F1;padding-right:0px;" ng-if="($index==0)&&file.content.thumb_available"><img ng-click="PreviewImg(file)" style="width:255px;" data-original="{{API_SERVICE_AMBAR}}api/thumbs/{{file.sha256}}"
                    src="{{API_SERVICE_AMBAR}}api/thumbs/{{file.sha256}}" alt="">
                </div>
              </div>
            </div>
            <style>
              /* 解决高度塌陷问题和父子元素垂直外边距重叠的问题 */

              .clearfix:before,
              .clearfix:after {
                content: "";
                display: table;
                clear: both;
              }

              .menu {
                position: absolute;
                /* visibility: hidden; */
                /* background-color: #eeeeee; */
                background-color: white;
                padding: 0px 1px;
                /* float: right; */
                top: -200px;
                left: calc(100% - 500px);
                /* height: 200px; */
                overflow: auto; 
                /* width: 200px; */
                width: 500px;
                /* right: 9%; */
                margin-top: 0%;
                z-index: 999;
                border: 1px solid #337ab7;
              }

              .menu::-webkit-scrollbar{
                width:8px;
                height: 8px;
              }

              .menu::-webkit-scrollbar-thumb{
                background-color: rgba(217, 237, 247);
                border-radius: 10px;
                box-shadow: inset 1px 1px 0 rgba(217, 237, 247,.2);
              }

              /* .menu::-webkit-scrollbar-track{
                border-radius: 10px;
                box-shadow: inset 0 0 3px rgba(0,0,0,0);
                background-color: white;
              } */

              .menu ul li {
                margin: 1px 0;
                padding: 3px 6px;
                cursor: pointer;
                list-style: none outside none;
                background-color: #ffffff;
              }

              .menu ul li:hover {
                background-color: #eeeeee;
              }

              .tagTypeSelect {
                height: 200px;
                overflow: auto;
              }

              .tagTypeSelect::-webkit-scrollbar {
                width: 8px;
                height: 8px;
              }

              .tagTypeSelect::-webkit-scrollbar-thumb {
                background-color: rgba(217, 237, 247);
                border-radius: 10px;
                box-shadow: inset 1px 1px 0 rgba(217, 237, 247, .2);
              }

              .tagNameSelect {
                height: 200px;
                overflow: auto;
              }

              .tagNameSelect::-webkit-scrollbar {
                width: 8px;
                height: 8px;
              }

              .tagNameSelect::-webkit-scrollbar-thumb {
                background-color: rgba(217, 237, 247);
                border-radius: 10px;
                box-shadow: inset 1px 1px 0 rgba(217, 237, 247, .2);
              }

            </style>
            <!-- 文件标签 -->
            <div style="position: relative;" style="border-bottom:1px solid #ddd;padding:2px 2px 5px 2px;" class="clearfix">
              <span class="fileTags" ng-repeat="fileTag in file.tags track by $index" ng-click="deleteOldTagItem(fileTag, file)">{{fileTag.name}} <i>×</i></span>
              <!-- 显示标签菜单的图标 -->
              <span id="showAddedTags{{$index}}" class="fa fa-plus" style="float: right;top: 10px;position: relative;color:#3468B5" ng-click="showAddedTags(file.tags, $index, tableData, file)"></span>
              <!-- 标签菜单项 -->
              <div class="menu" id="tagMenu{{$index}}" ng-init="index = $index" style="visibility: hidden;">
                  <!-- <ul style="padding: 0px;margin: 0px;">
                      <li ng-click="addTagItem(tag, file, index)" ng-repeat="tag in tagsInMenu">
                          <i class="fa fa-tag fa-fw"></i> {{tag.name}}
                      </li>
                  </ul> -->
                  <ul>
                    <li style="padding: 0; margin: 0;">
                      <div class="tagTypeSelect" style="float:left;width:50%;">
                        <ul ng-repeat="item in classifiedTags">
                          <li ng-click="showSelectedTagTypes(item, file)" style="text-align: center; height: 35px;cursor: pointer;font-size: 13px!important;padding: 10px 5px;" ng-style="{'color':tagTypeForSelect.id==item.id?'#3468b5':'','border-bottom':tagTypeForSelect.id==item.id?'2px solid':''}">
                            {{item.tagType}}&nbsp;&nbsp;<span>></span>
                          </li>
                        </ul>
                      </div>
                      <div class="tagNameSelect" style="float: left; width: 50%;">
                        <ul>
                          <li class="selectSub" ng-repeat="tagName in tagTypeForSelect.tagNames" ng-click="addTag(tagTypeForSelect, tagName, file, index)" style="text-align: center; height: 35px;cursor: pointer;font-size: 13px!important;padding: 10px 5px;">
                            {{tagName}}
                          </li>
                        </ul>
                      </div>
                    </li>
                  </ul>
              </div>
            </div>

            <!-- 路径和大小 -->
            <div class="row" style="padding:5px 2px 2px 2px;">
              <div class="col-xs-9"><a ng-click="download(file)" style="cursor: pointer;color:#3468B5">{{file.meta.full_name}}</a></div>
              <div class="col-xs-3" style="text-align: center;"> {{file.content.size}}</div>
            </div>
          </div>
          <!-- /.panel-body -->
        </div>
        <!-- 分页 -->
        <div style="height: 34px;" ng-if="tableData.length > 0">
          <tm-pagination conf="paginationConf"></tm-pagination>
        </div>
      </div>
      <div ng-show="tableData.length==0">暂无数据</div>
    </div>
  </div>
  <!-- 文件详情的弹出窗口 -->
  <div class="modal fade" id="showFileDetails" tabindex="-1" role="dialog" aria-labelledby="showFileDetailsLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:1000px;">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="">
            <span>文件详情</span>
          </h4>
        </div>
        <!-- 显示文件信息 -->
        <div class="modal-body" style="padding:3%;">
          <table class="table table-bordered table-hover" style="margin-bottom: 0;">
            <div style="width: 100%;border-bottom: 1px solid #949494;text-align: center;font-size: 20px;">
              {{fileName}}
            </div>
            <div class="theFileContent" ng-bind-html="fileContent|to_trusted" ng-repeat="fileContent in fullcontent.content.highlight.text">

            </div>
          </table>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        </div>
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
</div>